<template>
    <div class="box">

        <button @click="con()">打印</button>
        <button @click="del()">删除选项</button>
        <button @click="add()">添加选项</button>
        <br/>
        多项选择题目：<el-input
            class="inputboxClass"
            placeholder="编辑题目"
            v-model="title"
            clearable>
        </el-input>
          <el-checkbox-group v-model="checkList">
              
          <div v-for="(item,index) in items" :key="index">
             <el-checkbox :label=items[index].title >{{index+1}}:
                 <input v-model=items[index].title></el-checkbox> 
          </div>
          
          </el-checkbox-group>
          <!-- <button @click="con()">打印</button> -->
    </div>
</template>

<script>
//思路大概就是，将每个选项的内容和一个输入框绑定起来，达到可编辑效果；
  export default {
    data () {
      return {
        title: '',      //题目
        checkList: [],
        count: 5,       //代表添加下一个时的数量
        items:[{
            index: 1,
            title: '选项1'  //选项内容
        },{
            index: 2,
            title: '选项2'
        },{
            index: 3,
            title: '选项3'
        },{
            index: 4,
            title: '选项4'
        }]
      };
    },
    methods: {
        con(){
            console.log(this.checkList);
             console.log(this.items)
        },
        del(){
            this.items.pop();
            this.count--;
        },
        add(count){
            this.items.push({
                index: count,
                title: '选项'+this.count
            });
            this.count++;
        }
    }
  };
</script>
<style  scoped>
.inputboxClass{
    width: 300px;

}


</style>
